<template>
  <!-- 仓库 -->
  <div class="layout">
    <div class="shouye">
      <span>财务首页</span>
    </div>
    <!--    <hr class="hr1">-->
    <div class="form_body">
      <div>
        <jc-title title1="企业独立核算报表" :division="false" />
      </div>
      <costSummary />
    </div>
    <jc-title title1="快捷导航" :division="false" />
    <hr class="hr1">
    <div class="skipUrl">
      <el-button v-for="item in saleData" :key="item.name" type="success" plain @click="newlyOrder(item.path)">{{ item.name }}</el-button>
    </div>
    <div class="ranking_list">
      <div class="ranking ranking1">
        <jc-title title1="独立核算部门经营分析报表" :division="false" />
        <departAccount />
      </div>
      <div class="ranking ranking1">
        <jc-title title1="应付清单" :division="false" />
        <receivables />
      </div>
      <div class="ranking ranking1">
        <jc-title title1="应收清单" :division="false" />
        <dealWith />
      </div>
    </div>
  </div>
</template>

<script>
import { queryPooAmount } from '@/api/homePage/business'
import jcTitle from '@/components/Title'
import searData from '@/components/Search/mixin'
import costSummary from '@/views/homePageNew/financing/component/costSummary'
import receivables from '@/views/homePageNew/financing/component/receivables'
import dealWith from '@/views/homePageNew/financing/component/dealWith'
import departAccount from '@/views/homePageNew/financing/component/departAccount'
export default {
  name: 'Financing',
  components: {
    jcTitle,
    costSummary,
    receivables,
    dealWith,
    departAccount
  },
  mixins: [searData],
  data() {
    return {
      // 销售头部
      headerInfo: {},
      saleData: [
        { name: '价格维护', path: '/' },
        { name: this.$t('menu.marketManage'), path: '/marketOrder' },
        { name: this.$t('menu.purOrderAsi'), path: '/purchaseOrderList' },
        { name: '仓库库存', path: '/' },
        { name: '代建资料', path: '/' },
        { name: '异常清单', path: '/' },
        { name: '出库清单', path: '/' }
      ]
    }
  },
  created() {
    this.pooAmount()
  },
  methods: {
    // 跳转
    newlyOrder(path) {
      this.$router.push({ path: path })
    },
    // 表头
    pooAmount() {
      queryPooAmount({}).then(res => {
        if (res.code === 0) {
          this.headerInfo = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import 'src/styles/homePage';
.ranking {
  margin: 10px 0 5px 0;
}
.header {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 0 5px;
  li {
    list-style: none;
    width: 12%;
    min-width: 165px;
    height: 70px;
    padding: 10px;
    background-color: rgb(64,158,255,0.1);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .firstHead {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 16px;
      color: #FFF;
      background: #409EFF;
      padding: 5px 0;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .lastHead {
      font-size: 28px;
      color: #666;
      line-height: 75px;
      font-weight: 500;
    }
  }
}
.hr1 {
  margin: 4px;
}
.form_body1 {
  .header-name {
    position: relative;
    top: -5px;
    margin-bottom: 10px;
    .btn {
      margin-left: 450px;
      transform: translateY(18%);
    }
  }
}
</style>
